<template>
  <div>
    <FunctionlUnitFrame @closePane="closePane">
      <template slot="title">三维表面面积测量</template>
      <template slot="content">
        <div style="">
         <!-- <span><i class="fa fa-edit"></i></span><span><i class="fa fa-refresh"></i></span> <span><i class="fa fa-trash-o"></i></span>-->
          <table class="swpmCategory">
            <tr>
              <td @click="swpmCategoryTdC(1) "  :class="swpmCategoryNum=='1'?'active':''">测量</td>
              <td @click="swpmCategoryTdC(2) " :class="swpmCategoryNum=='2'?'active':''" style="border: 1px solid #df6659;background-color: #df6659;">清除</td>
            </tr>
          </table>
        </div>
          <div style="background-color:#748c99; height: 1px; margin-top: 3px"></div>
          <div style="padding: 6px;">
            <table class="swpmpointtable  " :class="swpmCategoryNum=='2'?'':'nodisplay'">
              <tr>
                <td>单位</td><td>
                <select value="">
                  <option selected="selected">自动</option>
                  <option>平方米</option>
                  <option>平方公里</option>
                  <option>亩</option>
                  <option>公顷</option>
                </select>
              </td>
              </tr>
              <tr>
                <td>面积</td><td>
                <input value=""/></td>
              </tr>
            </table>
        </div>
      </template>
    </FunctionlUnitFrame>
  </div>
</template>

<script>
  import FunctionlUnitFrame from '@/components/FunctionalUnit/FunctionlUnitFrame'
    export default {
        name: "SWSurfaceAreaMeasurement",
      components:{
        'FunctionlUnitFrame':FunctionlUnitFrame
      },
      methods:{
        closePane(){
          this.$emit('closePane',false);
        }
      }
    }
</script>

<style scoped>
  .fa{
    font-size: 22px;
    margin-left: 6px;
    cursor: pointer;
  }
  .fa-trash-o{
    color: #af4040;
  }
  .layerpanel{
    width: 300px;
  }
  .swpmCategory tr td{
    height: 40px;
    width: 60px;
    /*color: #dff0d8;*/
    color: #ffffff;
    cursor: pointer;
    border: 1px solid #00bcd4;
    text-align: center;
    border-radius: 0.1em;
    background-color: #2fa0ec;
    opacity: 0.5;
    font-weight: bold;
  }
  .swpmCategory tr td:hover{
    border: 1px solid  gray;
    background-color: gray;
  }
  .swpmpointtable{
    width: 100%;
    border-collapse: collapse;
  }
  .swpmpointtable tr td{
    padding-left: 15px;
    border: 1px solid rgba(237, 255, 255,1);
  }
  .swpmpointtable tr td:first-child{
    width: 30%;
  }
  .swpmpointtable tr td:nth-child(2){
    width: 70%;
  }
  table tr td:nth-child(2) input:focus{
    border: .5px solid blue;
  }
  .swpmpointtable tr:last-child td{
    height: 100px;
    border: none;
    text-align: center;
  }
</style>
